<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加商品</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script src="../js/loadProductList.js"></script>
  </head>
  <body>
    <style>
      #plist p:nth-child(3) {
        width: 200px;
        height: 200px;
      }
      li {
        list-style: none;
      }
      #update {
        display: none;
      }
      li img{
        width: 300px;
        height: 300px;
      }
    </style>
    <h1>网易云商城</h1>
    <div id="send">
      <input type="text" placeholder="商品名称" />
      <input type="text" placeholder="价格" />
      <input type="text" placeholder="商品详情" />
      <input type="text" placeholder="图片" />
      <input type="button" value="发布" />
    </div> 
    <ul id="plist">
      <!-- <li>
        <h2></h2>
        <p></p>
        <p></p>
        <img src="" alt="" />
        <button onclick="delBtnClick()">删除</button>
      </li> -->
    </ul>
    <script>
      /*
          1-uid在登录的时候返回的---存入本地--首页获取
          2-四个输入框一个按钮
          3-点击发布按钮的时候获取输入框的值
          4-调用发布商品接口
          5-商品接口列表
       */
      //获取用户id
      let id = localStorage.getItem('id');
      console.log(id);
      var ipts = document.querySelectorAll('#send input');
      console.log(ipts);
      loadProductList();
      /* 点击发布，点击发布按钮的时候获取输入框的值 */
      ipts[4].onclick = function () {

        /* 
            接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
        1.pimg 
        2.pname 
        3.pprice  
        4.pdesc  商品详情
        5.uid （可选）用户商品
          */
        //接口需要的参数
        var pname = ipts[0].value;
        var pprice = ipts[1].value;
        var pdesc = ipts[2].value;
        var pimg = ipts[3].value;
        //调用商品发布接口
        let url = 'http://jx.xuzhixiang.top/ap/api/goods/goods-add.php';
        let promise = axios.get(url, {
          params: {
            pname:pname,
            pprice,
            pdesc,
            pimg,
            uid:131247,
          },
        });
        console.log(promise);
        console.log('axios get 请求成功以后执行 then');
        // console.log(uid);
        promise.then(function (res) {
          //axios 成功的请求传递过来的数据
          console.log(res);
          //res里的data属性才是服务器传回来的数据
          console.log(res.data);
          //调用商品列表
          loadProductList();
        });
        ipts[0].value=""
        ipts[1].value=""
        ipts[2].value=""
        ipts[3].value=""
      };

      /* 
        接口地址：http://jx.xuzhixiang.top/ap/api/productlist.php
        接口请求方式：get
        接口参数：
        无需参数（不登录也能看到商品列表）
        uid 可选参数，可以看到当前用户上传到服务器的商品
        使用方式
        http://jx.xuzhixiang.top/ap/api/productlist.php
        服务器返回json数据
        1.找接口参数 ，uid 本地-- pagenum pagesize 
        2.地址 接口文档
        3.发起请求获取数据--> 分析数据 --> 商品数据 -页面结构 
          */
          var produceArr;

function loadProductList() {
  var uid = id;
  console.log(uid);
  // 获取第几页数据
  var pagenum = 0;
  //一页多少个商品
  var pagesize = 40;
  //地址
  var url = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php';
  //商品列表 uid写死 成zhangh这个用户的uid  所有用户登陆以后都看117479 这个用户上传的商品
  let p = axios.get(url, { params: { uid, pagenum, pagesize } });
  console.log(uid);
  console.log(p);
  p.then((r) => {
    //服务器返回数据
    // console.log(r.data);
    //分析 商品数组
    produceArr = r.data.data;
    // console.log(r.data.data);
    // console.log(produceArr);
    //页面结构 desc详情  target="_blank" 新页面打开
    var str = '';
    produceArr.forEach((pObj) => {
      str += `
      <li>
        <div>
        <h3 class="f-thide2">
        <a href='../../project/html/item.html?id=${pObj.pid}' target='_blank' class="cover" >
            <img src="${pObj.pimg}" class="f-img" alt="">
            </h3>
            <div class="cnt f-tc">
            <span>${pObj.pname}</span>
            </div>
            <p>￥${pObj.pprice}</p>
            </a>
      </div>
      <button onclick="delBtn(${pObj.pid},this)">删除</button>
  </li>
`;
    });
    document.querySelector('#plist').innerHTML = str;
    

      })
    }; 

     
      /* 
         接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
          接口请求方式：get
          接口参数：
              uid  用户id
              pid  商品id
              token 登陆时返回的token

          使用方式
              删除用户1中的 id为1商品
              http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1

    服务器返回json数据
            onclick="this" 里面的this 就是点击的按钮 
            ${pobj.pid}第一个形参对应pid  this第二个形参 对应btn
            <button onclick="delBtnClick(${pobj.pid},this)">删除</button>
        */
 //删除
 function delBtn(pid, btn) {
        console.log(pid, btn);
  var uid = id
        let url = 'http://jx.xuzhixiang.top/ap/api/cart-delete.php';
        axios.get(url, { params: { pid, uid } }).then((r) => {
          console.log(r.data);
          //删除成功
          btn.parentNode.remove();
        });
      }
    </script>
  </body>
</html>
